<template>
  <div class="auton" style="margin-top: -50px">
    <div class="bannerImg">
      <div class="topImg">
        <div>
          <img
            src="https://static.cdpservice.com/image/banner/教育培训.jpg"
            alt=""
          />
        </div>
        <img
          src="https://static.cdpservice.com/image/banner/教育培训.jpg"
          alt=""
        />
      </div>
    </div>
    <div class="cender">
      <div class="cEleft">
        <!-- 标题 -->
        <div class="titleStyle">
          <!-- 居中标题公用组件 -->
          <div class="title">
            <!-- 图片加标题 -->
            <img src="@/assets/image/employment/titleStyleleft.png" alt="" />
            <p>教育课程</p>
            <img src="@/assets/image/employment/titleStyleright.png" alt="" />
          </div>
          <!-- 描述 -->
          <p class="describe">发展残疾人士教育事业</p>
        </div>
        <div style="margin-top: 30px">
          <a-tabs @change="kecQiehuan">
            <a-tab-pane
              v-for="(item, index) in titleList"
              :key="index"
              :tab="item.name"
            >
              <div>
                <div
                  class="listDiv1 listDiv"
                  v-for="(item, list) in jykcList"
                  :key="list + 'sas'"
                >
                  <div class="dlex2-div" @click="getJumpVideo(item)">
                    <div class="image1">
                      <img
                        class="imgborder"
                        :src="imageWebUrl + item.cover"
                        @error="$event.target.src = GLOBAL.defaultCover"
                        alt=""
                      />
                    </div>
                    <div>
                      <span
                        class="titleTxt1"
                        style="font-weight: 600; margin-top: 6px"
                      >
                        {{ item.name }}
                      </span>
                      <!-- <div class="dlex2-div" style="margin-top: 8px">
                        <div
                          v-for="i in item.labels"
                          :key="i + 'rt'"
                          class="titlenav"
                        >
                          <div>{{ i }}</div>
                        </div>
                      </div> -->
                      <p
                        style="
                          margin-top: 16px;
                          -webkit-line-clamp: 2;
                          width: 469px;
                        "
                        class="titleTxt5 multiline"
                      >
                        {{ item.briefDesc }}
                      </p>
                      <div style="margin-top: 8px" class="dlex2-div">
                        <span class="smallPrint"
                          >{{ item.learnNumber }}人已学习</span
                        >
                      </div>
                      <div style="margin-top: 8px" class="dlex2-div">
                        <span class="redTxt" v-if="item.freeFlag == 'N'">
                          <p class="redTxt" style="font-size: 12px">￥</p>
                          {{ item.cost }}
                        </span>

                        <span class="redTxt" v-if="item.freeFlag == 'Y'"
                          >免费</span
                        >
                        <span class="redTxt" v-if="item.freeFlag == 'X'"
                          >限时免费</span
                        >
                      </div>
                    </div>
                  </div>
                  <div
                    class="dlex1-div dloDiv"
                    v-show="
                      item.webName || (item.jobList && item.jobList.length)
                    "
                  >
                    <span
                      class="greyBlue lineSingle"
                      style="width: 300px; margin-right: 50px"
                      v-if="item.webName"
                      >相关政策：<a
                        class="ams"
                        v-if="item.webUrl"
                        :href="item.webUrl"
                        target="_blank"
                        >{{ item.webName }}</a
                      >
                      <a v-else>{{ item.webName }}</a>
                    </span>
                    <span
                      class="greyBlue lineSingle"
                      v-show="item.jobList != ''"
                      >相关职位：
                      <a
                        class="ams"
                        @click="
                          $router.push(
                            '/employment/positionDetail?jobCode=' + item.jobCode
                          )
                        "
                        v-for="(item, ii) in item.jobList"
                        :key="ii + 'op'"
                        >{{ item.jobName }}
                      </a>
                    </span>
                  </div>
                </div>
                <a-empty
                  :image="imgUrl"
                  :image-style="{
                    height: '220px',
                  }"
                  style="margin: 0 auto"
                  v-if="jykcList.length < 1 && flag"
                />
              </div>
            </a-tab-pane>
            <!-- 框架的插槽使用方式 -->
            <div class="mall" @click="getJump1()" slot="tabBarExtraContent">
              <p>更多</p>
              <img src="@/assets/image/employment/mall.png" alt="" />
            </div>
          </a-tabs>
        </div>
        <!-- 标签标题 -->
        <!-- <div class="navTitle" style="margin-top: 23px">
          <p class="titleName">名师讲堂</p>
          <p class="titleenglish">FAMOUS TEACHER</p>
        </div> -->
        <!-- 名师展示 -->
        <!-- <div class="exhibition">
          <div style="border: 1px solid #eeeeee" class="dlex3-div">
            <div class="exImage">
              <img
                v-show="i == selIndex"
                v-for="(items, i) in teacherList"
                :key="i + 'sssa'"
                class="wrapper"
                @error="$event.target.src = GLOBAL.defaultCover"
                :src="imageWebUrl + items.photo"
                alt=""
              />
            </div>
            <div class="exText">
              <div
                class="exTxt1"
                @click="selcolIndex(index)"
                :class="{ selColor: selIndex == index }"
                v-for="(item, index) in teacherList"
                :key="index"
              >
                <div class="dlex2-div" style="height: 50px">
                  <img
                    v-show="index == selIndex"
                    src="@/assets/image/icon3.png"
                    alt=""
                  />
                  <span style="color: #666666" class="titleTxt1"
                    >金牌讲师：{{ item.name }}</span
                  >
                </div>
                <div class="introduction">
                  <p>
                    {{ item.briefDesc }}
                  </p>
                  <div
                    class="greyBlue cOicon-id"
                    style="margin-top: 20px; display: flex"
                    v-for="(items, i) in item.courseList"
                    :key="i + 's4'"
                  >
                    <img
                      class="imgagesTwo"
                      src="@/assets/image/icon4.png"
                      alt=""
                    />
                    <a
                      @click="getJumpVideo(items)"
                      class="lineSingle"
                      style="font-size: 14px; width: 280px"
                      >{{ items.name }}</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 68px auto"
            v-if="teacherList.length < 1"
          />
        </div> -->
        <!-- 标题 -->
        <div class="titleStyle" style="margin-top: 70px">
          <!-- 居中标题公用组件 -->
          <div class="title">
            <!-- 图片加标题 -->
            <img src="@/assets/image/employment/titleStyleleft.png" alt="" />
            <p>企业培训</p>
            <img src="@/assets/image/employment/titleStyleright.png" alt="" />
          </div>
          <!-- 描述 -->
          <p class="describe">多家培训机构保障残疾人士权益</p>
        </div>
        <!-- 企业培训部分 -->
        <div class="package" style="margin-top: 30px; min-height: 338px">
          <div
            class="listDiv2 wrapper"
            @click="getJumptrainDetails(item.trainNo, 2)"
            v-for="(item, index) in enterpriseList"
            :key="index + 'sas'"
          >
            <div class="image1">
              <img
                class="imgborder"
                :src="imageWebUrl + item.cover"
                @error="$event.target.src = GLOBAL.defaultCover"
                alt=""
              />
              <span v-if="item.statusTxt != '已结束'" class="stateLabel">
                进行中</span
              >
              <span style="background-color: #bebebe" v-else class="stateLabel"
                >已结束</span
              >
            </div>
            <div>
              <div>
                <span
                  class="titleTxt1"
                  style="font-weight: 600; margin-top: 6px"
                >
                  {{ item.trainName }}
                </span>
                <div style="margin-top: 16px">
                  <span
                    v-for="(item, i) in item.labels"
                    :key="i + 'juy'"
                    class="squareLabel"
                    >{{ item }}</span
                  >
                </div>
                <span class="timeTxt1" style="margin-top: 16px"
                  >培训时间：{{ item.startTime }}至 {{ item.endTime }}</span
                >
                <div class="cOicon-id" style="margin-top: 16px">
                  <img
                    class="imgagesOne"
                    :src="imageWebUrl + item.comLogo"
                    @error="$event.target.src = GLOBAL.defaultCover"
                    alt=""
                  />
                  <p>{{ item.comName }}</p>
                </div>
              </div>
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 0 auto; margin-top: 88px"
            v-if="enterpriseList.length < 1 && flag"
          />

          <!-- 暂时隐去 -->

          <!-- <a-tabs @change="callback">
            <a-tab-pane
              v-for="(item, index) in titleList2"
              :key="index"
              :tab="item.name"
            >
              <div>
               
              </div>
            </a-tab-pane>
            <span
              v-if="enterpriseList.length > 0 && flag"
              slot="tabBarExtraContent"
              class="smallPrint"
              style="color: #333333"
              @click="getJump2()"
              >更多<img
                width="9"
                height="9"
                src="@/assets/image/mall.png"
                alt=""
            /></span>
          </a-tabs> -->
        </div>
        <div class="cnBottom" v-if="enterpriseList.length > 1">
          <div style="margin: 0 auto; width: 230px">
            <a-button v-if="btnState == 1" @click="more()" class="sobtn"
              >点击加载更多</a-button
            >
            <span
              style="text-align: center"
              class="timeTxt1"
              v-if="btnState == 3"
              >没有更多了</span
            >
            <a-button v-if="btnState == 2" :loading="true" class="sobtn"
              >加载中</a-button
            >
          </div>
        </div>
        <!-- 职业培训部分 -->
        <!-- <div class="dlex1-div" style="margin-top: 50px">
          <div class="navTitle" style="flex: 1">
            <p class="titleName">职业培训</p>
            <p class="titleenglish">Vocational training</p>
          </div>
          <div>
            <div class="mall" @click="getJump3()" v-show="positionList.length">
              <p>更多</p>
              <img src="@/assets/image/employment/mall.png" alt="" />
            </div>
          </div>
        </div> -->
        <!-- 职业培训展示区域 -->
        <!-- <div class="coRsingleCF1">
          <div
            class="listDiv"
            @click="getJumptrainDetails(item.trainNo, 3)"
            v-for="(item, index) in positionList"
            :key="index + 'ccs'"
          >
            <span class="titleTxt1">
              {{ item.trainName }}
            </span>
            <span class="timeTxt1" style="margin-top: 16px"
              >培训时间： {{ item.startTime }} - {{ item.endTime }}</span
            >
            <div class="cOicon-id" style="margin-top: 24px">
              <img
                class="imgagesOne"
                :src="imageWebUrl + item.comLogo"
                @error="$event.target.src = GLOBAL.defaultCover"
                alt=""
              />
              <p>{{ item.comName }}</p>
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 0 auto; margin: 68px"
            v-if="positionList.length < 1"
          />
        </div> -->
        <!-- 机构展示区域 -->
        <!-- <div class="dlex2-div">
          <div
            class="listDiv4 dlex3-div"
            @click="getJumpdetailsO(item.comCode)"
            v-for="(item, i) in jigouList"
            :key="i + 'saas'"
          >
            <div>
              <img
                class="image1s"
                :src="imageWebUrl + item.logo"
                @error="$event.target.src = GLOBAL.defaultCover"
                alt=""
              />
            </div>
            <div style="margin-left: 16px">
              <span class="titleTxt2" style="margin-top: 12px; width: 100px">
                {{ item.name }}
              </span>
              <span
                style="margin-top: 16px; margin-bottom: 8px"
                class="timeTxt2"
                >培训项目<a>{{ item.trainingNum }}</a
                >个</span
              >
            </div>
          </div>
          <div class="listDiv5" @click="getJump4()" v-show="jigouList.length">
            <div class="img"></div>
            <p class="smallPrint">更多机构</p>
          </div>
        </div> -->
      </div>
      <!-- 未登录状态的右侧 -->
      <div v-if="Sign" class="cEright">
        <div class="layer" style="padding-bottom: 45px">
          <div
            class="cOicon-id redIv"
            :class="{ haveMall: classpage.total > classpage.pageSize }"
          >
            <img
              class="imgagesFour"
              src="@/assets/image/employment/star.png"
              alt=""
            />
            <p style="margin-left: 8px; flex: 1">热门课程</p>
            <div
              class="cOicon-id"
              @click="classpagenation()"
              v-show="classpage.total > classpage.pageSize"
            >
              <p class="smallPrint" style="margin-right: 6px">换一批</p>
              <img
                :class="{ rotateActive: classpage.loadding }"
                style="width: 10px"
                src="@/assets/image/icon2.png"
                alt=""
              />
            </div>
          </div>
          <div
            class="listDiv6"
            v-for="(item, i) in pushCurriculum"
            :key="i + 'lkm'"
          >
            <div class="dlex3-div handtype" @click="getJumpVideo(item)">
              <div class="image2">
                <img
                  class="imgborder"
                  :src="imageWebUrl + item.cover"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                />
              </div>
              <div class="text2">
                <span class="titleTxt5 lineSingle" style="width: 165px">{{
                  item.name
                }}</span>
                <!-- <div
                  v-if="item.labels[0]"
                  style="margin: 8px 0"
                  class="titlenav"
                >
                  <div>{{ item.labels[0] }}</div>
                </div> -->
                <div class="dlex2-div">
                  <span style="margin-top: 8px" class="smallPrint"
                    >{{ item.learnNumber }}人已学习</span
                  >
                </div>
                <div class="dlex2-div">
                  <span
                    class="redTxt"
                    style="margin-top: 12px; font-size: 15px"
                    v-if="item.freeFlag == 'N'"
                  >
                    {{ "￥" + item.cost }}
                  </span>
                  <span
                    class="redTxt"
                    style="margin-top: 12px; font-size: 15px"
                    v-if="item.freeFlag == 'Y'"
                  >
                    免费
                  </span>
                  <span
                    class="redTxt"
                    style="margin-top: 12px; font-size: 15px"
                    v-if="item.freeFlag == 'X'"
                  >
                    限时免费
                  </span>
                  <!-- <span style="margin-left: 32px" class="smallPrint"
                    >{{ item.learnNumber }}人已学</span
                  > -->
                </div>
              </div>
            </div>
            <div>
              <span
                style="margin: 17px auto"
                class="greyBlue"
                v-if="item.jobList != ''"
                @click="
                  $router.push(
                    '/employment/positionDetail?jobCode=' +
                      item.jobList[0].jobCode
                  )
                "
                >相关职位：<a class="ams">{{
                  item.jobList[0].jobName
                }}</a></span
              >
              <span
                class="greyBlue lineSingle"
                v-if="item.webName"
                style="width: 295px"
                >相关政策：<a
                  class="ams"
                  v-if="item.webUrl"
                  :href="item.webUrl"
                  target="_blank"
                  >{{ item.webName }}</a
                >
                <a v-else>{{ item.webName }}</a></span
              >
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 0 auto; padding: 40px 0"
            v-if="pushCurriculum.length < 1"
          />
          <div
            class="cOicon-id redIv"
            :class="{ haveMall: studypage.total > studypage.pageSize }"
          >
            <img
              class="imgagesFour"
              src="@/assets/image/employment/star.png"
              alt=""
            />
            <p style="margin-left: 8px; flex: 1">热门企业培训</p>
            <div
              class="cOicon-id"
              @click="studypagenation()"
              v-show="studypage.total > studypage.pageSize"
            >
              <p class="smallPrint" style="margin-right: 6px">换一批</p>
              <img
                :class="{ rotateActive: studypage.loadding }"
                src="@/assets/image/icon2.png"
                width="10"
                alt=""
              />
            </div>
          </div>
          <!-- 推荐职业培训列表 -->
          <div
            class="listDiv7"
            @click="getJumptrainDetails(item.trainNo, 2)"
            v-for="(item, index) in rmzypxList"
            :key="index + 'adas'"
          >
            <span class="titleTxt5">{{ item.trainName }}</span>
            <div class="cOicon-id" style="margin-top: 8px">
              <div v-for="i in item.labels" :key="i + '14'" class="squareLabel">
                {{ i }}
              </div>
            </div>
            <span class="timeTxt1" style="margin-top: 15px"
              >{{ item.startTime }} 至 {{ item.endTime }}</span
            >
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 48px auto"
            v-if="rmzypxList.length < 1"
          />
        </div>
      </div>
      <!-- 登录状态的右侧 -->
      <div v-if="!Sign" class="cEright">
        <div class="layer">
          <div style="padding: 32px 17px">
            <div class="dlex2-div">
              <div
                class="image3"
                :style="'background-image: url('+($store.state.localImgFlag == 'N'?'':imageWebUrl) + $store.state.picture+')'"
                @error="$event.target.src = GLOBAL.defaultIconImg"
              >
                <!-- <img
                  :src="
                    ($store.state.localImgFlag == 'N' ? '' : imageWebUrl) +
                    this.$store.state.picture
                  "
                  alt="cover"
                /> -->
              </div>
              <div style="margin-left: 24px">
                <div class="cOicon-id">
                  <span class="titleTxt6" style="margin-right: 16px">{{
                    this.$store.state.nickName
                  }}</span>
                </div>
                <div class="cOicon-id" style="margin-top: 8px">
                  <div class="dlex2-div" v-if="this.$store.state.roleType == 2">
                    <img
                      class="imgagesTwo"
                      src="@/assets/image/icon-disability.png"
                      alt=""
                    />
                    <span class="timeTxt1">残疾人士</span>
                  </div>
                  <div class="dlex2-div" v-if="this.$store.state.roleType == 1">
                    <img
                      class="imgagesTwo"
                      src="@/assets/image/icon-ordinary.png"
                      alt=""
                    />
                    <span class="timeTxt1">爱心人士</span>
                  </div>
                  <!-- 普通用户 -->
                  <div
                    class="dlex2-div"
                    v-if="this.$store.state.roleType == null"
                  >
                    <img
                      class="imgagesTwo"
                      src="@/assets/image/icon-ordinary.png"
                      alt=""
                    />
                    <span class="timeTxt1">普通用户</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 学习进度展示 -->
          <div class="cOicon-id cesid">
            <img class="imgagesFour" src="@/assets/image/icon15.png" alt="" />
            <p style="margin-left: 8px; font-weight: 600">学习成果</p>
          </div>
          <div class="outcomes">
            <div class="dlex1-div greydiv">
              <div class="serDiv">
                <div>
                  <a :title="myData.dayLearnNum" class="yelloTxt lineSingle">{{
                    myData.dayLearnNum == null ? 0 : myData.dayLearnNum
                  }}</a>
                  <span class="smalltxt"> &nbsp;分钟</span>
                </div>
                <div>
                  <span class="smallPrint">今日学习</span>
                </div>
              </div>
              <div class="serDiv">
                <div>
                  <a :title="myData.studyRate" class="yelloTxt lineSingle">{{
                    myData.studyRate == null ? 0 : myData.studyRate
                  }}</a
                  ><span class="smalltxt"> &nbsp;小时</span>
                </div>
                <div>
                  <span class="smallPrint">累计学习</span>
                </div>
              </div>
              <div class="serDiv">
                <div>
                  <a :title="myData.coursesNum" class="yelloTxt lineSingle">
                    {{ myData.coursesNum == null ? 0 : myData.coursesNum }}</a
                  ><span class="smalltxt"> &nbsp;门</span>
                </div>
                <div>
                  <span class="smallPrint">已学课程</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 轮播证书 -->
          <div class="rotation2" v-if="certificateList.length > 0">
            <a-carousel arrows>
              <div
                slot="prevArrow"
                class="custom-slick-arrow"
                style="left: 10px; z-index: 199"
              >
                <a-icon type="left-circle" />
              </div>
              <div
                slot="nextArrow"
                class="custom-slick-arrow"
                style="right: 10px"
              >
                <a-icon type="right-circle" />
              </div>
              <div
                v-for="(item, index) in certificateList"
                :key="index + 'aasf'"
                class=""
              >
                <img
                  width="100%"
                  :src="imageWebUrl + item.certificateImg"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                />
              </div>
            </a-carousel>
          </div>
          <div class="dlex2-div gdiv" v-if="certificateList.length > 0">
            <span
              class="smallPrint"
              @click="$router.push('/personalCenter/myCertificate')"
              >查看更多证书</span
            >
            <img
              width="17"
              height="11"
              src="@/assets/image/icon18.png"
              alt=""
            />
          </div>

          <!-- 学习的进度 -->
          <div class="cOicon-id redIv haveMall" style="margin-top: 16px">
            <div @click="bomderpx(true)" :class="{ bomder: bomderIndex }">
              <span class="timeTxt1">学习中</span>
            </div>
            <div
              style="margin-left: 32px"
              @click="bomderpx(false)"
              :class="{ bomder: !bomderIndex }"
            >
              <span class="timeTxt1">已学完</span>
            </div>
            <a style="flex: 1">&nbsp;</a>

            <div class="mall" @click="$router.push('/personalCenter/myclass')">
              <p>更多</p>
              <img src="@/assets/image/employment/mall.png" alt="" />
            </div>
          </div>
          <div class="wrapper" v-show="bomderIndex" style="margin: 23px 0px">
            <div
              class="listDiv6"
              style="padding-bottom: 15px; height: auto"
              v-for="(item, i) in mycuList"
              @click="getJumpVideo(item)"
              :key="i + 'ajdcj'"
            >
              <div class="dlex3-div handtype">
                <div class="image2">
                  <img
                    :src="imageWebUrl + item.cover"
                    @error="$event.target.src = GLOBAL.defaultCover"
                    alt=""
                  />
                </div>
                <div class="text2">
                  <span class="titleTxt5 lineSingle">{{ item.name }}</span>
                  <span
                    class="smallPrint"
                    style="display: block; margin-top: 6px"
                    >已学到{{ Math.ceil(item.learnedTime) }}%</span
                  >
                  <span
                    class="smallPrint"
                    style="display: block; margin-top: 6px"
                    >{{ item.createDate }}</span
                  >
                </div>
              </div>
            </div>
            <div class="noreject" v-if="mycuList.length < 1 && mycuListFlag">
              <img src="@/assets/image/poster3.png" alt="" />
              <p>您还未开始学习任何课程！~</p>
            </div>
          </div>
          <!-- 已学完 -->
          <div class="wrapper" v-show="!bomderIndex" style="margin-top: 23px">
            <div
              class="listDiv6"
              style="padding-bottom: 15px; height: auto"
              v-for="(item, i) in mycuList"
              @click="getJumpVideo(item)"
              :key="i + 'ajdcj'"
            >
              <div class="dlex3-div handtype">
                <div class="image2">
                  <img
                    :src="imageWebUrl + item.cover"
                    @error="$event.target.src = GLOBAL.defaultCover"
                    alt=""
                  />
                </div>
                <div class="text2">
                  <span class="titleTxt5 lineSingle">{{ item.name }}</span>
                  <span
                    class="smallPrint"
                    style="display: block; margin-top: 6px"
                    >已学到100%</span
                  >
                  <span
                    class="smallPrint"
                    style="display: block; margin-top: 6px"
                    >{{ item.createDate }}</span
                  >
                </div>
              </div>
            </div>
            <div class="noreject" v-if="mycuList.length < 1 && mycuListFlag">
              <img src="@/assets/image/poster4.png" alt="" />
              <p>您还没有学完课程！ ~</p>
            </div>
          </div>
          <!-- 可能感兴趣的课程 -->
          <div
            class="cOicon-id redIv"
            :class="{ haveMall: classpage.total > classpage.pageSize }"
          >
            <img class="imgagesFour" src="@/assets/image/icon16.png" alt="" />
            <p style="margin-left: 8px; flex: 1">您可能感兴趣的课程</p>
            <div
              class="cOicon-id"
              @click="classpagenation()"
              v-show="classpage.total > classpage.pageSize"
            >
              <p class="smallPrint" style="margin-right: 6px">换一批</p>
              <img
                :class="{ rotateActive: classpage.loadding }"
                style="width: 10px"
                src="@/assets/image/icon2.png"
                alt=""
              />
            </div>
          </div>
          <div
            class="listDiv6"
            style="padding-bottom: 15px; height: auto"
            v-for="(item, i) in pushCurriculum"
            :key="i + 'ijji'"
          >
            <div class="dlex3-div handtype" @click="getJumpVideo(item)">
              <div class="image2">
                <img
                  class="imgborder"
                  :src="imageWebUrl + item.cover"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                />
              </div>
              <div class="text2">
                <span class="titleTxt5 lineSingle" style="width: 165px">{{
                  item.name
                }}</span>
                <!-- <div
                  v-show="item.labels.length"
                  class="titlenav"
                  style="margin-left: 0px"
                >
                  <div>{{ item.labels[0] }}</div>
                </div> -->
                <span style="margin-top: 8px" class="smallPrint"
                  >{{ item.learnNumber }}人已学习</span
                >
                <div style="margin-top: 8px" class="dlex2-div">
                  <span
                    class="redTxt"
                    style="font-size: 12px"
                    v-if="item.freeFlag == 'N'"
                  >
                    {{ "￥" + item.cost }}
                  </span>
                  <span
                    class="redTxt"
                    style="font-size: 15px"
                    v-if="item.freeFlag == 'Y'"
                  >
                    免费
                  </span>
                  <span
                    class="redTxt"
                    style="font-size: 15px"
                    v-if="item.freeFlag == 'X'"
                  >
                    限时免费
                  </span>
                </div>
              </div>
            </div>
            <div>
              <span
                style="margin: 17px auto"
                class="greyBlue"
                v-if="item.jobList != ''"
                @click="
                  $router.push(
                    '/employment/positionDetail?jobCode=' +
                      item.jobList[0].jobCode
                  )
                "
                >相关职位：<a class="ams">{{
                  item.jobList[0].jobName
                }}</a></span
              >
              <span
                class="greyBlue lineSingle"
                v-if="item.webName"
                style="width: 295px"
                >相关政策：<a
                  class="ams"
                  v-if="item.webUrl"
                  :href="item.webUrl"
                  target="_blank"
                  >{{ item.webName }}</a
                >
                <a v-else>{{ item.webName }}</a></span
              >
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 48px auto"
            v-if="pushCurriculum.length < 1"
          />
          <!-- 可能感兴趣的培训部分 -->
          <div
            class="cOicon-id redIv"
            :class="{ haveMall: studypage.total > studypage.pageSize }"
          >
            <img
              class="imgagesFour"
              src="@/assets/image/employment/star.png"
              alt=""
            />
            <p style="margin-left: 8px; flex: 1">您可能感兴趣的培训</p>
            <div
              class="cOicon-id"
              @click="studypagenation()"
              v-show="studypage.total > studypage.pageSize"
            >
              <p class="smallPrint" style="color: #232d32">换一批</p>
              <img
                :class="{ rotateActive: studypage.loadding }"
                width="10"
                src="@/assets/image/icon2.png"
                alt=""
              />
            </div>
          </div>
          <!-- 推荐培训 -->
          <div
            class="listDiv8"
            style="margin-top: 15px"
            v-for="(item, index) in rmzypxList"
            :key="index + 'ji'"
            @click="getJumptrainDetails(item.trainNo, 2)"
          >
            <span class="titleTxt5">{{ item.trainName }}</span>
            <div class="cOicon-id" style="margin-top: 8px">
              <div
                v-for="i in item.labels"
                :key="i + 'saw'"
                class="squareLabel"
              >
                {{ i }}
              </div>
            </div>
            <span class="timeTxt1" style="margin-top: 15px"
              >{{ item.startTime }} 至 {{ item.endTime }}</span
            >
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 48px auto"
            v-if="rmzypxList.length < 1"
          />
          <!-- 推荐职位部分 -->
          <div class="cOicon-id redIv haveMall" style="margin-top: 19px">
            <img class="imgagesFour" src="@/assets/image/icon17.png" alt="" />
            <p style="margin-left: 8px; flex: 1">推荐职位</p>
            <div class="cOicon-id">
              <div
                class="mall"
                @click="$router.push('/employment/positionList')"
              >
                <p>更多</p>
                <img src="@/assets/image/employment/mall.png" alt="" />
              </div>
            </div>
          </div>
          <div>
            <ul class="workList">
              <li v-for="(item, i) in tjzwList" :key="i + 'osk'">
                <div class="workName">
                  <p class="title">{{ item.name }}</p>
                  <p class="maney">50-60K</p>
                </div>
                <div class="nav">
                  <p>{{ item.degree }}</p>
                  <p class="hr">｜</p>
                  <p>{{ item.workExper }}</p>
                  <p class="hr">｜</p>
                  <p>{{ item.disaType }}</p>
                </div>
                <div
                  class="workmsg"
                  @click="
                    $router.push(
                      '/employment/positionDetail?jobCode=' + item.jobCode
                    )
                  "
                >
                  <img
                    @error="$event.target.src = GLOBAL.defaultIconImg"
                    :src="imageWebUrl + item.comLogo"
                    alt=""
                  />
                  <div class="msg">
                    <p class="title">{{ item.comName }}</p>
                    <p class="navs">
                      {{ item.comNature }}
                      <span v-show="item.comNature">|</span>
                      {{ item.comTrade }}
                      <span v-show="item.comTrade && item.scale">|</span>
                      {{ item.scale }}
                    </p>
                  </div>
                </div>
                <p class="relevantclass" v-if="item.couseList.length">
                  相关课程：<span
                    @click="getJumpVideo(item.couseList[0])"
                    v-for="(icom, i) in item.couseList"
                    :key="i"
                    >{{ icom.name }}</span
                  >
                </p>
                <span class="greyBlue lineSingle" v-if="item.webName"
                  >相关政策：<a
                    class="ams"
                    v-if="item.webUrl"
                    :href="item.webUrl"
                    target="_blank"
                    >{{ item.webName }}</a
                  >
                  <a v-else>{{ item.webName }}</a></span
                >
              </li>
            </ul>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 0 auto; padding: 68px 0"
            v-if="tjzwList.length < 1"
          />
        </div>
      </div>
    </div>
    <router-view />
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
// 职位数组列表
const positionList = [];
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      btnState: 2,
      // 登录状态
      Sign: true,
      titleList: [],
      titleList2: [
        { id: "08", name: "全部" },
        // { id: "01", name: "进行中" },
        // { id: "02", name: "未开始" },
        // { id: "03", name: "已结束" },
      ],
      // 推荐课程
      classpage: {
        pageSize: 4,
        pageIndex: 1,
        total: 0,
        loadding: false,
      },
      // 推荐培训
      studypage: {
        pageSize: 4,
        pageIndex: 1,
        total: 0,
        loadding: false,
      },
      selIndex: 0,
      mosgolor: 1,
      bomderIndex: true,
      // 企业培训列表
      enterpriseList: [],
      positionList,
      // 教育课程
      jykcList: [],
      // 右侧推荐的热门培训
      rmzypxList: [],
      // 下方机构列表
      jigouList: [],
      // 急招岗位和推荐岗位
      tjzwList: [],
      // 用户的证书
      certificateList: [],
      // 名师的列表
      teacherList: [],
      // 推荐的课程
      pushCurriculum: [],
      //我的学习进度
      mycuList: [],
      // 个人信息
      myData: {},
      flag: false,
      onLoading: false,
      // 优化
      mycuListFlag: false,
      //改
      pageIndex: 1,
    };
  },
  methods: {
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.enterprise(this.pageIndex);
    },
    // 选中状态
    selcolIndex(e) {
      this.selIndex = e;
    },
    kecQiehuan(e) {
      this.jykcList = [];
      this.homeCurriculum(this.titleList[e].code);
    },
    // 学习进度
    bomderpx(e) {
      this.mycuListFlag = false;
      this.mycuList = [];
      if (e) {
        this.selMycurriculum(1);
      } else {
        this.selMycurriculum(2);
      }
      this.bomderIndex = e;
    },
    // 跳转课程列表
    getJump1(e) {
      this.$router.push("/education/oLcurriculumList?id=" + e);
    },
    // 跳转线上培训列表
    getJump2() {
      this.$router.push("/education/qYtrainList");
    },
    // 跳转个人中心
    getMydata() {
      this.$router.push("/personalCenter/information");
    },
    // 跳转职业培训列表
    getJump3() {
      this.$router.push("/education/trainingList");
    },
    // 跳转机构培训列表
    getJump4() {
      this.$router.push("/education/mechanismList");
    },
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push(
        "/video/detailsVideo?courseNo=" +
          e.courseNo +
          "&learnedTime=" +
          e.learnedTime
      );
    },
    // 跳转培训详情页
    getJumptrainDetails(e, r) {
      // 查询详情的接口是公用的，所以传id里面显示内容不一样传type，2都是企业培训，3都是职业培训
      this.$router.push("/education/trainDetails?id=" + e + "&type=" + r);
    },
    // 跳转机构详情页
    getJumpdetailsO(e) {
      this.$router.push("/education/detailsOrganization?id=" + e);
    },
    // 查询课程分类接口
    selEducation() {
      this.$ajax({
        url: "/news/code/list/tree?",
        method: "post",
        params: {
           codeType: 13,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.titleList = res.data;
          // 查询课程
          this.homeCurriculum(res.data[0].code);
          // console.log();
        }
      });
    },
    // 教育培训 - 企业培训
    callback(key) {
      let ocom = "";
      this.enterpriseList = [];
      ocom = "0" + key;
      // console.log(ocom);
      this.enterprise(ocom);
    },
    enterprise(e) {
      this.flag = false;
      let ber = [];
      this.$ajax({
        url: "/educational/traininginfo/list/enterprise",
        method: "post",
        params: {
          status: "", //状态：01.进行中，02.未开始，03.已结束，空为全部,
          trainName: "", //培训名称
          pageSize: 5,
          pageIndex: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          ber = res.data.list;
          for (var i in ber) {
            this.enterpriseList.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.enterpriseList = [];
          return false;
        }
        this.flag = true;
      });
    },
    // 职业培训 - 首页列表
    professional() {
      this.$ajax({
        url: "/educational/traininginfo/list/home/professional",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data;
        } else {
          this.positionList = res.data;
          return false;
        }
      });
    },
    // 热门培训分页
    studypagenation() {
      this.studypage.loadding = true;
      if (
        this.studypage.total &&
        this.studypage.pageIndex != 1 &&
        this.studypage.total <=
          this.studypage.pageIndex * this.studypage.pageSize
      ) {
        this.studypage.pageIndex = 1;
        this.recommendSel();
      } else if (
        this.studypage.total &&
        this.studypage.total >
          this.studypage.pageIndex * this.studypage.pageSize
      ) {
        this.studypage.pageIndex += 1;
        this.recommendSel();
      }
    },
    // 职业培训 - 首页热门推荐
    recommendSel() {
      this.$ajax({
        url:
          "/educational/traininginfo/list/recommend?pageSize=" +
          this.studypage.pageSize +
          "&pageIndex=" +
          this.studypage.pageIndex,
        method: "get",
        params: {},
      }).then((res) => {
        this.studypage.loadding = false;
        if (res.code == 200) {
          this.rmzypxList = res.data.list;
          this.studypage.total = res.data.totalCount;
        } else {
          this.rmzypxList = [];
          return false;
        }
      });
    },
    // 课程推荐
    homeCurriculum(e) {
      this.onLoading = true;
      this.flag = false;
      this.$store.commit("changonLoading", true);
      this.$ajax({
        url: "/educational/courseinfo/list/home?sortNo=" + e,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.jykcList = res.data;
        } else {
          this.onLoading = false;
          this.jykcList = [];
          return false;
        }
        this.flag = true;
      });
      this.$store.commit("changonLoading", false);
    },
    // 首页推荐机构
    homeRecommedList() {
      this.$ajax({
        url:
          "/entrepreneurial/cominfo/homeRecommedList?pageSize=" +
          3 +
          "&pageIndex=" +
          1,
        method: "post",
        params: {
          comType: 2,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.jigouList = res.data.list;
        } else {
          this.jigouList = [];
          return false;
        }
      });
    },
    // 首页推荐职位
    homeRecomList() {
      this.$ajax({
        url:
          "/entrepreneurial/comjob/homeRecomList?pageSize=" +
          1 +
          "&pageIndex=" +
          3,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.tjzwList = res.data.list;
          // console.log();
        }
      });
    },
    // 查询用户证书
    selcertificateList() {
      this.$ajax({
        url: "/user/certificateinfo/list?pageSize=" + 1 + "&pageIndex=" + 6,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.certificateList = res.data.list;
          // console.log();
        } else {
        }
      });
    },
    // 名师
    selTeacher() {
      this.$ajax({
        url: "/educational/lecturerinfo/list/lecturer/home",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.teacherList = res.data;
          // console.log();
        }
      });
    },
    // 推荐课程分页
    classpagenation() {
      this.classpage.loadding = true;
      if (
        this.classpage.total &&
        this.classpage.pageIndex != 1 &&
        this.classpage.total <=
          this.classpage.pageIndex * this.classpage.pageSize
      ) {
        this.classpage.pageIndex = 1;
        this.selpushCurriculum();
      } else if (
        this.classpage.total &&
        this.classpage.total >
          this.classpage.pageIndex * this.classpage.pageSize
      ) {
        this.classpage.pageIndex += 1;
        this.selpushCurriculum();
      }
    },
    // 推荐培训
    selpushCurriculum() {
      this.$ajax({
        url:
          "/educational/courseinfo/list/recommend?pageSize=" +
          this.classpage.pageSize +
          "&pageIndex=" +
          this.classpage.pageIndex,
        method: "post",
        params: {},
      }).then((res) => {
        this.classpage.loadding = false;
        if (res.code == 200) {
          this.pushCurriculum = res.data.list;
          this.classpage.total = res.data.totalCount;
          // console.log();
        }
      });
    },
    // 查询我的课程列表
    selMycurriculum(e) {
      this.$ajax({
        url: "/user/usercollect/study/list?pageSize=" + 3 + "&pageIndex=" + 1,
        method: "post",
        params: {
          type: e, //学习状态 1.未学完 2.已学完
        },
      }).then((res) => {
        if (res.code == 200) {
          this.mycuList = res.data.list;
          this.mycuListFlag = true;

          // console.log();
        } else {
        }
      });
    },
    // 查询我的
    selMydata() {
      this.$ajax({
        url: "/user/userinfo/info/detail",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          if (res.data != null) {
            this.myData = res.data;
          }
          // console.log(this.myData);
        } else {
        }
      });
    },
  },
  created() {
    //this.$store.commit('changonLoading',false);
    // 先判断登录状态，有则
    if (this.$store.state.token != "") {
      // 取消无登录状态
      this.Sign = false;
      // 同时查询我的个人信息
      this.selMydata();
      // 查询推荐职位
      this.homeRecomList();
      // 查询用户的证书
      this.selcertificateList();
      // 查询用户的学习进度课程
      this.selMycurriculum(1);
    }

    this.enterprise(1);
    this.professional();
    // 调取热门推荐
    this.recommendSel();
    // 查询课程类别
    this.selEducation();
    // 查询机构
    this.homeRecommedList();

    //
    this.selTeacher();
    // 推荐课程
    this.selpushCurriculum();
  },
};
</script>


<style lang="less" scoped>
// tab切换选中字体加粗
/deep/.ant-tabs-tab-active {
  font-weight: bold;
}

/deep/.ant-tabs-tab {
  font-size: 16px;
}
// 选中的样式
.selColor {
  height: auto !important;
  .dlex2-div {
    span {
      color: #232d32 !important;
      font-weight: 600;
    }
    background-color: #ffbe37 !important;
  }
}
.package {
  display: block;
  overflow: hidden;
}
.auton {
  background-color: #f8f8f8;
  .bannerimg {
    width: 100vw;
    height: 693px;
  }
  .topImg {
    max-width: 100% !important;
    // min-height:800px;
    max-height: 693px;
    overflow: hidden;
    div {
      width: 100%;
      max-height: 693px;
      z-index: 0;
      position: absolute;
      filter: blur(10px);
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 800px;
      z-index: 1;
      position: relative;
    }
  }
  .cender {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    .cEleft {
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.07);
      width: 840px;
      background-color: #ffffff;
      padding: 45px 16px;
      .listDiv1 {
        width: 806px;
        // height: 265px;
        background: #ffffff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
        float: left;
        margin-bottom: 24px;
        cursor: pointer;
        padding: 12px;
        padding-right: 24px;
        margin-left: 1px;
        .image1 {
          width: 271px;
          height: 156px;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .dloDiv {
          width: 746px;
          margin-top: 16px;
          padding-top: 16px;
          border-top: #eeeeee solid 1px;
        }
      }
      .listDiv2 {
        width: 100%;
        height: 192px;
        background: #ffffff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
        padding: 12px;
        float: left;
        margin-left: 1px;
        margin-bottom: 24px;
        display: flex;
        cursor: pointer;
        align-items: center;
        -moz-transition: all ease 1s;
        -o-transition: all ease 1s;
        transition: all ease 1s;
        .image1 {
          width: 217px;
          height: 156px;
          overflow: hidden;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .listDiv2:hover {
        -webkit-box-shadow: 0 5px 12px 0 rgb(124 124 124 / 30%);
        -moz-box-shadow: 0 10px 24px 0 rgb(204, 35, 35);
        box-shadow: 0 8px 8px 0 #cecece;
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
        // transition:  all 1s;
      }
      // 展示样式
      .exhibition {
        width: 808px;
        height: 437px;
        box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
        padding: 16px;
        margin-top: 30px;
        .exImage {
          width: 422px;
          height: 100%;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .exText {
          width: 353px;
        }
        .exTxt1 {
          width: 100%;
          height: 50px;
          overflow: hidden;
          border-top: 1px solid #cccccc;
          background-color: #ffffff;
          cursor: pointer;
          span {
            margin-left: 24px;
          }
          img {
            width: 7px;
            height: 100%;
          }
        }
        .exTxt1:first-child {
          border: 0;
        }
        .introduction {
          height: auto;
          padding: 16px;
          border-bottom: #eeeeee 1px solid;
          p {
            width: 100%;
            height: 166px;
            display: block;
            overflow: hidden;
            text-indent: 30px;
            font-size: 15px;
            font-family: PingFang SC;
            color: #666666;
            line-height: 22px;
          }
        }
      }
      // 培训样式
      .coRsingleCF1 {
        margin-top: 30px;
        .listDiv {
          width: 386px;
          height: 153px;
          background: #ffffff;
          box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
          padding: 20px;
          float: left;
          margin-left: 20px;
          margin-bottom: 20px;
          -moz-transition: all ease 1s;
          -o-transition: all ease 1s;
          transition: all ease 1s;
        }
        .listDiv:nth-child(2n-1) {
          margin-left: 0px;
        }
      }
      //
      .listDiv4 {
        width: 232px;
        height: 128px;
        background: #ffffff;
        padding: 24px 16px;
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
        margin-right: 14px;
        cursor: pointer;

        &:last-child {
          margin-right: 0px;
        }
        .image1s {
          width: 80px;
          height: 80px;
        }
      }
      .listDiv5 {
        width: 60px;
        height: 128px;
        background: #ffffff;
        padding: 36px 0px;
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
        margin-right: 14px;
        cursor: pointer;
        .img {
          width: 18px;
          height: 18px;
          display: block;
          text-align: center;
          margin: 0 auto;
          background-image: url("~@/assets/image/icon13.png");
          background-size: 100% 100%;
        }
        p {
          // margin: 0 auto;
          display: block;
          text-align: center;
          padding-top: 8px;
        }
      }
      .listDiv5:hover {
        background-color: #ffbe37;
        p {
          color: #333333;
          font-weight: bold;
        }
        .img {
          background-image: url("~@/assets/image/malljigou.png");
        }
      }
    }
    .smallPrint {
      display: flex;
      align-items: center;
      color: #232d32;

      img {
        width: 10px !important;
        height: 10px !important;
      }
    }
    .cEright {
      width: 340px;
      margin-left: 20px;
      .haveMall {
        background-image: url("~@/assets/image/mallback.jpg");
        background-size: 100% 100%;
      }
      .redIv {
        height: 40px;
        // background-image: url("~@/assets/image/mallback.jpg");
        padding: 0 16px;
        background-color: #232d32;
        // background-size: 100% 100%;
        margin-bottom: 10px;
        .timeTxt1 {
          color: #ffffff;
        }
        .smallPrint {
          color: #232d32;
          img {
            width: 10px !important;
            height: 10px !important;
          }
        }
        p {
          color: #ffffff;
        }
        span {
          cursor: pointer;
        }
      }
      .listDiv6 {
        width: 308px;
        padding: 16px 0;
        overflow: hidden;
        margin: 16px auto;
        border-bottom: #eeeeee 1px solid;
        .image2 {
          width: 112px;
          height: 77px;
          margin-right: 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .titleTxt5 {
          font-weight: 600;
        }
      }
      .listDiv7 {
        width: 308px;
        height: 126px;
        overflow: hidden;
        margin: 16px auto;
        border-bottom: #eeeeee 1px solid;
        .titleTxt5 {
          margin-top: 8px;
          font-weight: 600;
        }
      }
      .greyBlue {
        font-size: 14px !important;
        a {
          font-size: 14px !important;
        }
      }
    }
  }
}

//登录状态下的右侧
.image3 {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  border: #adadad 1px solid;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.outcomes {
  width: 349px;
  margin: 0 auto;
  padding: 14px 16px;
  margin: 32px 0;
}
.cesid {
  width: 100%;
  height: 40px;
  background: #232d32;
  padding: 11px 16px;
  p {
    color: #ffffff;
  }
}
.greydiv {
  .serDiv {
    width: 33%;
    .smalltxt {
      font-size: 14px;
      font-family: PingFang SC;
      color: #232d32;
    }
    .smallPrint {
      color: #7e7e7e;
    }
    div {
      margin-bottom: 8px;
      display: flex;
      align-items: baseline;
      text-align: center;
      justify-content: center;
    }
  }
  .serDiv:nth-child(2) {
    border-left: solid 1px #dedede;
    border-right: solid 1px #dedede;
  }
  .yelloTxt {
    font-size: 22px;
    max-width: 60px;
    display: inline-block;
  }
}
.rotation2 {
  margin: 16px 0 20px 0;
  padding: 0 15px;
  width: 100%;
  overflow: hidden;
}
.bomder {
  height: 100%;
  border-bottom: 2px #ffbe37 solid;
  line-height: 40px;
  display: inline-block;
  span {
    color: #ffbe37 !important;
    font-weight: 600;
  }
}
.listDiv8 {
  width: 308px;
  height: 126px;
  overflow: hidden;
  margin: 16px auto;
  border-bottom: #eeeeee 1px solid;
  .titleTxt5 {
    display: block;
    margin-top: 8px;
    font-weight: 600;
  }
}
.workList {
  padding: 16px;
  li {
    padding-top: 16px;
    margin-bottom: 16px;
    padding-bottom: 31px;
    border-bottom: 1px solid #eeeeee;
    .workName {
      display: flex;
      justify-content: space-between;
      .title {
        color: #333333;
        font-size: 15px;
        line-height: 21px;
        font-weight: bold;
      }
      .maney {
        color: #ffbe37;
        font-size: 16px;
        line-height: 22px;
        font-weight: bold;
      }
    }
    .nav {
      display: flex;
      margin-top: 16px;
      p {
        color: #666666;
        font-size: 12px;
        line-height: 17px;
      }
      .hr {
        margin: 0 15px;
      }
    }
    .workmsg {
      margin-top: 16px;
      display: flex;
      cursor: pointer;
      img {
        width: 50px;
        height: 50px;
      }
      .msg {
        flex: 1;
        padding-left: 16px;
        .title {
          color: #000000;
          font-size: 13px;
          line-height: 18px;
        }
        .navs {
          display: block;
          margin-top: 16px;
          color: #999999;
          font-size: 12px;
          line-height: 17px;
        }
      }
    }
    .relevantclass,
    .policy {
      margin-top: 16px;
      color: #000000;
      font-size: 12px;
      line-height: 17px;
      span {
        color: #0d4fae;
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .policy {
      margin-top: 8px;
    }
    .greyBlue {
      margin-top: 16px;
      width: 295px;
    }
  }
  li:last-child {
    border: 0;
    padding-bottom: 8px;
  }
}

.mall {
  p {
    color: #232d32 !important;
  }
}
.gdiv {
  width: 292px;
  margin: 0 auto;
  border-radius: 21px;
  border: 1px solid #ffbe37;
  padding: 11px 90px;
  cursor: pointer;
  .smallPrint {
    margin-right: 8px;
    color: #ffbe37 !important;
  }
}
.handtype {
  .titleTxt5 {
    width: 185px;
  }
}
// 人名
.titleTxt6 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 5px;
}
/* For demo */
.ant-carousel {
  .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
}

.ant-carousel {
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
}
.ant-carousel {
  .custom-slick-arrow:before {
    display: none;
  }
}
.ant-carousel {
  .custom-slick-arrow:hover {
    opacity: 0.5;
  }
}

.ant-carousel {
  .slick-slide h3 {
    color: #fff;
  }
}
// 隐藏导航条
/deep/.slick-dots {
  display: none !important;
}
.redTxt {
  display: flex;
  align-items: baseline;
}
.titlenav {
  width: 77px;
}
/deep/:root {
  --swiper-theme-color: none;
}
</style>
